05274-181001 ScrapboxのダークモードUserCSSを公開
https://flic.kr/p/2bAetPK https://farm2.staticflickr.com/1965/45019651141_bbf53bf560_k.jpg
macOS Mojaveで「ダークモード」が快適。基本的な背景が黒に近いダークになり、文字が白に近いグレイに。画面全体が落ち着いているから目に優しい。
すると、Twitterで「私も今、Mojaveのダークモードを楽しんでいるところです。もしよろしければ、先生がプライベートのプロジェクトで使用されているScrapboxのsettingsを公開していただけないでしょうか。」とのメンションをいただきました。 実は最近、Scrapboxでは白黒反転するUser CSSを使っておらず、白黒反転したい場合はmacOSに標準で備わっている反転機能（control+option+command+8）で画面全体を白黒反転する方法を使っていました。ただしその場合、写真がネガになってしまうので、やはりちゃんとするにはScrapboxのUser CSSを書くべき。
https://flic.kr/p/2bAeu2P https://farm2.staticflickr.com/1915/45019651841_c1d2df2823_k.jpg
そこで、改めて、ダークモードUser CSSを整備することにしました。基本的に「/shokai/Dark Editor CSS」から教わった「invert」を使い、強調表示のピンク、アンダーラインのグリーン、shio.icon コメント用の背景色イエロー、注記の赤字といったカラーリングを直して作成。shioゼミのScrapboxに適用したところ、学生たちから「見やすい」と大好評。毎日、長時間にわたって画面を見て起案やコメントをし続けている学生たちの目を守るために、ダークモードは非常に大切。 1. ご自身のScrapboxプロジェクトに「settings」というタイトルのページを作成する（すでにある場合は、そのページのタイトルを適当に変更（例えば「disabled settings」とか）して、新たに「settings」ページを作成してください）。
2. 「settings」ページ内に下記の2行をコピーしてペイスト。
code:style.css
@import "/api/code/shio/黒いUserCSS/style.css";
3. ご自身のScrapboxプロジェクトで画面左上のscrapbox.iconアイコンをクリックし、「Settings」→「Theme」で「Hacker 1」を選択。
4. ページをリロード
https://flic.kr/p/28QcUXy https://farm2.staticflickr.com/1916/43208706110_de7d18e606_k.jpg
shio.icon自身、大変気に入りました。
ゼミのScrapboxでそれを使っていると，この shiology.org の画面にも適用したい。しかし、ブログに貼っている写真は、白が背景に溶け込むように撮影した写真が結構あるため、背景を暗くすると写真が浮いてしまう。
そこで、上記のコードをshio（自分のページ）に置きました。これによって、公開しているshiology.orgの色調を維持しつつ、shio.icon自身が開いたときだけ白黒反転されます。上部のピンクの帯はshiologyのアイデンティティなので、そこだけ再反転し、濃さを調整して完成。 その結果、shio.iconから見ると、本ページはこのように表示されています。
https://gyazo.com/afc07270ee2388c5433260914b253d34
もし公開されている色調でshio.iconが見たい場合は、Safariの「プライベートウィンドウ」などで開けばいい。自分名義でログインしていない状態でアクセスするので、他の人から見た画面（白背景黒文字）になります。iPhone/iPadならFirefox FocusでOK。 ダークで書いて、ホワイトに公開。実現!!
https://flic.kr/p/2acK7pk https://farm2.staticflickr.com/1923/44108796265_661bf013f7_k.jpg